<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#f").hide();
        $("#select").click(function () {
            //发送ajax查询所有图书
            $.ajax({
                url: "http://www.zhonglianqihua.com/get",
                success: function (data) {
                    var str = '<table align="center" border="1">' +
                        '    <thead>' +
                        '    <tr>' +
                        '        <th>联系人</th>' +
                        '        <th>电话号码</th>' +
                        '        <th>邮箱地址</th>' +
                        '        <th>公司</th>' +
                        '        <th>备注</th>' +
                        '        <th>创建时间</th>' +
                        '    </tr>' +
                        '    </thead>' +
                        '    <tbody>';
                    console.log(data);
                    $.each(data.data, function (index, book) {
                        console.log(book);
                        str += '<tr>' +
                            '<td>' + book.username + '</td>' +
                            '<td>' + book.tel + '</td>' +
                            '<td>' + book.email + '</td>' +
                            '<td>' + book.company + '</td>' +
                            '<td>' + book.remark + '</td>' +
                            '<td>' + book.createTime + '</td>' +
                            '</tr>';
                    })
                    str += '    </tbody>' +
                        '</table>';
                    $("#detail").html(str);

                },
                dataType: "json"
            });
        });

        $("#insert").click(function () {
            $("#f").toggle();
        });
        $("#add").click(function () {
            var bookName = $("#f input:eq(0)").val();
            var bookPrice = $("#f input:eq(1)").val();
            $.ajax({
                url: "insertBook",
                data: {"bookName": bookName, "bookPrice": bookPrice},
                success: function (result) {
                    if (result == "success") {
                        //添加图书成功
                        alert("添加图书成功，请点击查询所有图书！")
                    }
                }
            });
        });
    });

</script>
<body>
<p align="center"><a href="javascript:void(0)" id="select">查询所有报名列表</a>
<div id="detail">

</div>

<hr/>
<form id="f">
    bookName:<input type="text" name="bookName"/><br/>
    bookPrice:<input type="text" name="bookPrice"/><br/>
    <input type="button" id="add" value="insert"/>
</form>
<div id="dd"></div>

</body>
</html>
